<template>
    <div class="tmpl">
        <nav-bar title="图文介绍"></nav-bar>
        <div class="news-title">
            <p v-text="goods.title"></p>
            <div>
                <!--<span>{{goods.click}}次点击</span>-->
                <!--<span>分类:{{goods.category}}</span>-->
                <span>添加时间:{{goods.add_time | convertDate}}</span>
            </div>
        </div>
        <div class="news-content" v-html="goods.content"></div>

        <!--评论内容开始-->
        <!--使用子组件-->
        <comment :tid="gid"></comment>
        <!--评论内容结束-->
    </div>
</template>

<script>
    export default {
        name: "goodsPictureInfo",
        data(){
            return{
                goods:{},
                gid:this.$route.query.goodsId,
            }
        },
        created(){
            //1:获取路由参数
            // let id = this.$route.query.id;
            //2:拼接路由参数成为后台请求的URL
            this.$ajax.get('goods/findGoodsById/' + this.gid)
                .then(res => {
                    //3:响应回来渲染页面
                    this.goods = res.data.message;
                })
                .catch(err => {
                    console.log(err);
                })
        }
    }
</script>

<style scoped>
    .news-title p {
        color: #0a87f8;
        font-size: 20px;
        font-weight: bold;
    }

    .news-title span {
        margin-right: 30px;
    }

    .news-title {
        margin-top: 5px;
        border-bottom: 1px solid rgba(0, 0, 0, 0.2);
    }
</style>